<template>
  <div class="box">
    <div><Title :title="menu"></Title></div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :expand-row-keys="[0]"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="menuName" label="菜单名称" width="200">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
            >
              添加
            </el-button>
            <el-button
              @click="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { reactive } from "@vue/reactivity";
import Title from "../../components/title.vue";
import { list } from "../../api/Login/login";
export default {
  components: {
    Title,
  },
  data() {
    return {
      menu: "菜单管理",
    };
  },
  setup() {
    const tableData = reactive([]);
    const listFun = () => {
      list().then((res) => {
        if (res.status == 200) {
          console.log(res.data);
          console.log(tableData);
          res.data.forEach((v) => {
            tableData.push(v);
          });
        }
      });
    };
    const deleteRow=(index, rows)=>{
        console.log(index, rows);
        // rows.splice(index, 1);
      }
    listFun();
    return {
      tableData,
      deleteRow
    };
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 5px;
}
</style>
